<template>
  <div>
     <el-dialog title="添加角色" width="60%"
     v-model="roleFlag" >
    
     <el-form label-width="120px" :model="roleName" ref="addFormRef">
      <el-form-item label="角色名称">
          <el-input v-model="addForm.roleName"></el-input>
      </el-form-item>
      <el-form-item >
        <template #label>
          <div style="line-height: 40px;">
            <el-popover
              placement="top-start"
                      :width="200"
              trigger="hover"
              content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasRole('admin')`)"
            >         
            <template #reference>
                <el-icon size="20">
                    <QuestionFilled></QuestionFilled>
                  </el-icon> 
            </template>
          </el-popover>
             
              权限字符
          </div>
        </template>
          <el-input v-model="addForm.roleKey"></el-input>
      </el-form-item>
      <el-form-item label="角色顺序">
        <el-input-number v-model="addForm.roleSort"   controls-position="right"></el-input-number>
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="addForm.status">
          <el-radio value="0" label="正常"></el-radio>
          <el-radio value="1" label="停用"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="菜单权限
">  
        <div style="width: 600px;">
      
            <el-checkbox label="展开/折叠" v-model="menuFild"  @change="toChangeMenu($event)"></el-checkbox>
             <el-checkbox label="全选/全不选" @change="allMenu($event)"></el-checkbox>
              <el-checkbox label="父子联动" v-model="parentFlag"></el-checkbox>
          
        </div>
          <div style="width: 600px;border:1px solid #ccc;" >
            <el-tree    style="max-width: 600px"
            ref="treeRef"
                :data="menuTree"
                  row-key="id"
                  node-key="id"
                  @check-change="getMenuId"
                 show-checkbox
                 :check-strictly="!parentFlag"
                :default-expanded-keys="expandedKeys">
            </el-tree>
          </div>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" v-model="addForm.remark"></el-input>
      </el-form-item>
     </el-form>
     <template #footer>
      <div>
         <el-button type="primary" @click="toAddRole">确定</el-button>
         <el-button>取消</el-button>
      </div>
     </template>
    
    </el-dialog>
  </div>
</template>
<script setup>
 import {ref,defineExpose,reactive} from 'vue'
 import {QuestionFilled} from '@element-plus/icons-vue'
 let roleFlag=ref(false) //弹出层控制器
 import {treeselect} from '@/api/system/menu'
 import {addRole} from '@/api/system/role'
let menuTree=ref([])//菜单树形数据
// 获取菜单的树形数据
treeselect().then(res=>{
 console.log(res,"菜单树形数据")
 menuTree.value=res.data;
})
defineExpose({
  roleFlag //提前 暴露数据 父组件才可以操作
})

let menuFild=ref(false)//展开折叠
let expandedKeys =ref([])//展开的时候 将所有的 id 放到本数组中  
let treeRef=ref() //树形组件
// 展开与折叠的方法
  let toChangeMenu=(e)=>{
    console.log(e,"事件触发了吗111")
    console.log( menuFild.value,"事件触发了吗")

      for (let i = 0; i < treeRef.value.store._getAllNodes().length; i++) {
        // 遍历 el-tree 的每个节点，将节点的 expanded 属性设为 true 或 false
        treeRef.value.store._getAllNodes()[i].expanded =  menuFild.value;
      }
  }

  let allMenu=(e)=>{ //全选和全不选
    if(e){ //e---true和false  setCheckedNodes(所有树形数据)
      treeRef.value.setCheckedNodes(menuTree.value) //全选
    }else{
         treeRef.value.setCheckedNodes([]) //全不选
    }
    
  }
  let parentFlag=ref(true)//父子联动
// 收集表单数据
let addForm=reactive({
 deptCheckStrictly: true,
 deptIds: [], //部门ids 
 menuCheckStrictly: true, //是否 菜单是否关联
 menuIds:[],  //角色能访问的菜单id的集合
 remark: "",   //备注
 roleKey: "",  //标识
 roleName: "",  //角色名称
 roleSort: 1,       //排序
 status: "0",       //状态  0 启用  1禁用
})

// 获取选中的菜单id  收集树形选择的id的方法getCheckedKeys()
let getMenuId=()=>{
  console.log(treeRef.value.getCheckedKeys(),"选中的菜单id")
  addForm.menuIds=treeRef.value.getCheckedKeys()
}
 let emit=defineEmits(["uplist"])
 let addFormRef=ref(null)
 let toAddRole=async ()=>{
 
            let res= await addRole(addForm)
            console.log(res ,"添加角色")
           roleFlag.value=false;
            emit("uplist") //通知父组件刷新列表
 }

 
</script>